Redesign article page layout with banner, authors, and metadata#34
Open
juthing wants to merge 1 commit into
Open
Redesign article page layout with banner, authors, and metadata#34juthing wants to merge 1 commit into
juthing wants to merge 1 commit into
Conversation
…nd author section - Banner full-width avec aspect-ratio 1300/445 sur desktop, 3/4 portrait sur mobile, gradient généré dynamiquement depuis l'ID de l'article - Titre + date | résumé rapide + section auteur (avatar 42px, nom en gras, poste en dessous) avant le corps de l'article - Filtres Eleventy articleGradient et formatDate (fr/en) pour générer les dégradés et les dates localisées sans hardcoding - 2 auteurs de démonstration (Claire Dupont, Marc Leclerc) avec avatars dégradé placeholders - introduction et quick-start mis à jour avec auteurs et chapeaux https://claude.ai/code/session_01DmSJiNY6zrn43WER4qVQU8
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This PR redesigns the article page layout with a prominent banner section, improved author display, and better structured metadata presentation. It also introduces utility filters for generating gradient backgrounds and formatting dates.
Key Changes
CSS Updates (article.css)
.article-pageto use full width layout with new.article-content-innerwrapper for content padding and max-width constraints.article-bannerwith responsive aspect ratios (1300/445 on desktop, 3/4 on mobile) and proper image handling via.article-banner-img.article-bylinewith.article-authors(flex column layout).article-author-blockfor individual author cards with avatar and info.article-author-avatarfrom 24px to 42px with placeholder styling.article-author-nameand.article-author-postfor better typography hierarchy.article-datelinefor date and summaryTemplate Updates (article.njk)
renderedContentoutput with structured article layout.article-bodydiv for better styling controlEleventy Configuration (eleventy.config.cjs)
articleGradientfilter: generates deterministic CSS gradients from string IDs using hash-based hue calculationformatDatefilter: formats dates with locale support (French/English)Content Updates
Notable Implementation Details
aspect-ratioCSS property with media query breakpoint at 700pxobject-fit: coverfor consistent image displaydata-lang-contentattributes for date and summaryhttps://claude.ai/code/session_01DmSJiNY6zrn43WER4qVQU8